
import BaseView from "./baseView.js";

export default class shouye extends BaseView {
    //添加css样式
    renderCss() {
        $("head").append('<link rel="stylesheet" type="text/css" href="css/yingyuan.css"><link rel="stylesheet" type="text/css" href="css/reset.css">')
    }
    render() {
        this.$el.html(`
        <!-- 头部 -->
        <header>
            <nav class="H-nav layout">
                <div class="layout H-left-div">
                    <a href="#/homepages">
                        <p class="log">
                            <span class="text aaa" >猫眼电影</span>
                            <span class="beijin"></span>
                            <span class="faguang"></span>
                        </p>
                    </a>
                    <div class="layout">
                    <span>成都
                    <ol>
                        <li class="layout">
                            <span>区:</span><a href="">武侯</a><a href="">郫都</a><a href="">双流</a><a href="">金牛</a>
                        </li>
                    </ol>
                </span>
                    </div>
                    <ul class="layout H-link">
                        <li class="layout">
                            <a href="#/homepages">首页</a>
                        </li>
                        <li class="layout">
                            <a href="#/movies">电影</a>
                        </li>
                        <li class="layout">
                            <a href="#/yingyuans">影院</a>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">榜单</a>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">热点</a>
                        </li>
                    </ul>
                </div>
                <div class="H-right-div layout">
                    <form action="">
                        <input type="text" placeholder="找影视剧、影人、影院">
                    </form>
                    <div class="register">
                        <div>
                            <div class="yuan">
                                <div class="you">
                                </div>
                                <div class="zhongjian">
                                    <p>
                                        <a href="#/logins">登录</a>
                                        <a href="#/dingdans">我的订单</a>
                                    </p>
                                </div>
                                <div class="zuo">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
        <!-- 内容 -->
        <main>
            <article>
                <!-- 海报 -->
                <header class="poster poster111">
                    <ul class="layout">
                        <li class="poster-left layout layout11">
                           
                        </li>
                        <li class="poster-right layout layout22">
                            <label for=""><input type="button" value="查看电影详情">
                            </label>
                        </li>
                    </ul>
                </header>
                <section class="site-nav">
                    <nav class="layout">
                        <p>服务:</p>
                        <ul class="layout">
                            <li class="layout"><input type="button" value="全部"></li>
                            <li class="layout"><input type="button" value="可改签"></li>
                            <li class="layout"><input type="button" value="可退票"></li>
                        </ul>
                    </nav>
                    <nav class="layout">
                        <p>品牌:</p>
                        <ul class="layout layoutyingyuan">
                           
                        </ul>
                    </nav>
                    <nav class="layout">
                        <p>行政区:</p>
                        <ul class="layout layoutyingyuandiqu">
                            
                        </ul>
                    </nav>
                    <nav class="layout">
                        <p>日期:</p>
                        <ul class="layout layouttime">
                            
                        </ul>
                    </nav>
                </section>
                <section class="cinema">
                    <h1>影院列表</h1>
                    <ul class="yingyuanliebiao">
                       
                    </ul>
                </section>
                <section class="page-turning">
                    <ul class="layout">
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">···</a></li>
                        <li><a href="">23802</a></li>
                        <li><a href="">下一页</a></li>
                    </ul>
                </section>
            </article>
        </main>
        <!-- 底部 -->
        <footer>
            <nav>
                <ul class="layout">
                    <<li>
                        <a href="#/homepages">关于我们</a>
                    </li>
                    <li>
                        <a href="#/homepages">管理团队</a>
                    </li>
                    <li>
                        <a href="#/homepages">投资者关系</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团网</a>
                    </li>
                    <li>
                        <a href="#/homepages">格瓦拉</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团下载</a>
                    </li>
                </ul>
            </nav>
            <p>商务合作邮箱：v@maoyan.com客服电话：10105335违法和不良信息举报电话：4006018900</p>
            <p>北京猫眼文化传媒有限公司</p>
        </footer>
        `)
    }

    handle() {
        //获取url参数
        function aa(qs) {
            var s = location.href;
            s = s.replace("?", "?&").split("&");
            var re = "";
            for (let i = 1; i < s.length; i++) {
                if (s[i].indexOf(qs + "=") == 0) {
                    re = s[i].replace(qs + "=", "")
                }
            } 2
            return re
        }
        let movieid=aa("movieid")
        let reg = /[0-9a-z]{23}/
        if (reg.test(movieid) == false) {
            $(".poster111").css({ "display": "none" })
            movieid=""
        }
        //渲染当前电影
        $.ajax({
            type: "post",
            url: "/api/platoon/getamovie",
            data: {
                movieid: movieid
            },
            dataType: "json",
            success(data) {
                let str = `
                <img src="http://127.0.0.1:4000/photos/${data[0].images[0]}" alt="">
                <div>
                    <h1>${data[0].cname}</h1>
                    <p>${data[0].ename}</p>
                    <p>${data[0].type}</p>
                    <p>${data[0].area}/时长：${data[0].time}分钟</p>
                    <span>${data[0].upDate}${data[0].area}上映</span>
                    <div class="layout">
                        <label for="xiang1"><input type="button" value="想看" id="xiang1"><i
                                class="xiangkan"></i></label>
                        <label for="ping1"><input type="button" value="评分" class="ping1"><i
                                class="pingfen"></i></label>
                    </div>
                </div>
                `
                $(".layout11").html(str)
            }
        })
        $(".layout22").on("click", function () {
            window.location.hash = `#/moviederails?${movieid}`
        })
        //获取时间
        function times() {
            var myDate = new Date;
            var mon = myDate.getMonth() + 1; //获取当前月
            var date = myDate.getDate();//获取当前日
            let str = '<li class="layout"><input type="button" value="全部" autofocus></li>'
            for (let i = 0; i < 8; i++) {
                str += `
                 <li class="layout"><input type="button" value="${mon}月${date++}日"></li>
                 `
            }
            $(".layouttime").html(str)
        }
        times()
        //渲染影院
        $.ajax({
            type: "post",
            url: "/api/platoon/getallcinemas",
            dataType: "json",
            success(data) {
                let str = `<li class="layout"><input type="button" value="全部" autofocus></li>`
                data.forEach(item => {
                    str += `
                    <li class="layout" data-yingyuanid=${item._id}><input type="button" value="${item.name}"></li>
                    `
                });
                $(".layoutyingyuan").html(str)
            }
        })
        $(".layoutyingyuan").on("click", "li", function () {
            let yingyuan = this.dataset.yingyuanid
            $.ajax({
                type: "post",
                url: "/api/platoon/getyingyuan1",
                data:{
                    "yingyuanid":yingyuan
                },
                dataType: "json",
                success(data) {
                    let str = ""
                    data.forEach(item => {
                        str += `
                        <li class="layout">
                        <ol class="layout">
                            <li class="cinemaleft">
                                <a href="./composing-pc-yingyuan2.html">${item.name}</a>
                                <p>地址：${item.address}</p>
                                <span></span>
                            </li>
                            <li class="cinemaright layout">
                                <div>
                                    <p><span>￥38.2</span>起</p>
                                    <p>19km</p>
                                </div>
                                <input type="button" value="选座购票" data-yingyuanid=${item._id}>
                            </li>
                        </ol>
                        </li> 
                        `
                    })
                    $(".yingyuanliebiao").html(str)                 
                }
            })
        })
        //渲染地区
        $.ajax({
            type: "post",
            url: "/api/platoon/getallcinemas",
            dataType: "json",
            success(data) {
                let str = `<li class="layout"><input type="button" value="全部" autofocus></li>`
                data.forEach(item => {
                    str += `
                    <li class="layout" data-yingyuanid=${item._id}><input type="button" value="${item.address}"></li>
                    `
                });
                $(".layoutyingyuandiqu").html(str)
            }
        })
        $(".layoutyingyuandiqu").on("click", "li", function () {
            let yingyuan = this.dataset.yingyuanid
            $.ajax({
                type: "post",
                url: "/api/platoon/getyingyuan1",
                data:{
                    "yingyuanid":yingyuan
                },
                dataType: "json",
                success(data) {
                    let str = ""
                    data.forEach(item => {
                        str += `
                        <li class="layout">
                        <ol class="layout">
                            <li class="cinemaleft">
                                <a href="./composing-pc-yingyuan2.html">${item.name}</a>
                                <p>地址：${item.address}</p>
                                <span></span>
                            </li>
                            <li class="cinemaright layout">
                                <div>
                                    <p><span>￥38.2</span>起</p>
                                    <p>19km</p>
                                </div>
                                <input type="button" value="选座购票" data-yingyuanid=${item._id}>
                            </li>
                        </ol>
                        </li> 
                        `
                    })
                    $(".yingyuanliebiao").html(str)                 
                }
            })
        })
        //渲染影院列表
        $.ajax({
            type: "post",
            url: "/api/platoon/getallcinemas",
            dataType: "json",
            success(data) {
                let str = ""
                data.forEach(item => {
                    str += `
                    <li class="layout">
                    <ol class="layout">
                        <li class="cinemaleft">
                            <a href="./composing-pc-yingyuan2.html">${item.name}</a>
                            <p>地址：${item.address}</p>
                            <span></span>
                        </li>
                        <li class="cinemaright layout">
                            <div>
                                <p><span>￥38.2</span>起</p>
                                <p>19km</p>
                            </div>
                            <input type="button" value="选座购票" data-yingyuanid=${item._id}>
                        </li>
                    </ol>
                    </li> 
                    `
                })
                $(".yingyuanliebiao").html(str)
            }
        })
        //选座购票
        $(".yingyuanliebiao").on("click", "input", function () {
            window.location.hash = `#/yingyuanxiangqing?yingyuanid=${this.dataset.yingyuanid}&movieid=${movieid}`
        })

    }
}